<template>
    <div class="search_con">
        <el-select
            placeholder="搜索"
            ref="searchRef"
            :popper-class="(searchList.length || searchVal === '') ? 'search_email_popper' : ''"
            v-model="searchList"
            size="small"
            multiple
            filterable
            :reserve-keyword="false"
            @change="handlerSearch"
            @input="handlerInput"
            @keyup.enter="handlderCreate"
            suffix-icon=""
        >
            <template #prefix>
                <i class="iconfont icon-search" />
            </template>
            <el-option :label="item.label + ( item.label ? '包含' : '' ) + searchVal" v-for="item in optionList" :value="item.val" />
        </el-select>
         <div v-if="searchList.length">
            <div class="placeholder">搜索范围</div>
            <div class="filter_item" @click="handlerSelectFilter(item.searchKey)" :class="curSelect === item.searchKey ? 'select' : ''" v-for="item in filterList">{{ item.searchValue }}</div>
         </div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

const emit = defineEmits(['search']);

const searchList = ref<any>([]);
const optionList = ref<any>([{
    val: 'all',
    label: ''
}, {
    val: 'fromEmail',
    label: '发件人'
}, {
    val: 'subject',
    label: '主题'
}, {
    val: 'annex',
    label: '附件'
}]);

const curSelect = ref('all');
const searchRef = ref();
const searchVal = ref('');
const route = useRoute();

const filterList = [{
    searchKey: 'all',
    searchValue: '全部'
}, {
    searchKey: 'fromEmail',
    searchValue: '发件人'
}, {
    searchKey: 'toEmail',
    searchValue: '收件人'
}, {
    searchKey: 'subject',
    searchValue: '主题'
}, {
    searchKey: 'bodyText',
    searchValue: '正文'
}, {
    searchKey: 'annex',
    searchValue: '附件'
}, ];

const handlerSelectFilter = (key: string) => {
    curSelect.value = key;
    handlerSearch();
};

const handlerInput = () => {
    searchVal.value = searchRef.value.inputRef.value;
};

const handlderCreate = () => {
    if (!searchList.value.length) {
        curSelect.value = 'all';
    }
    searchList.value.push(searchVal.value);
    handlerSearch();
};

const handlerSearch = (val?:string) => {
    const len = searchList.value.length;
    if (val) {
        const selVal = searchList.value[len - 1];
        if (optionList.value.some((item: any) => item.val === selVal)) {
            curSelect.value = selVal;
            searchList.value[len - 1] = searchVal.value;
        }
    }
    if (!searchList.value.length) {
        searchVal.value = '';
    }

    const list = searchList.value.map((searchValue: any) => {
        return {
            searchValue,
            searchKey: curSelect.value
        };
    })

    emit('search', list);
}

const init = () => {
    if (route.query.search) {
        searchList.value = [route.query.search];
        handlerSearch();
    }
};

onMounted(() => init());
</script>
<style lang="scss" scoped>
.search_con {
  padding: 5px 10px;
}

.placeholder {
    color: #666;
    font-size: 12px;
    margin: 5px 0;
}

.filter_item {
    cursor: pointer;
    display: inline-block;
    width: 48px;
    text-align: center;
    line-height: 30px;
    margin-right: 8px;
    margin-bottom: 10px;
    &.select {
        background-color: #ccc;
    }
}
</style>
<style>
.search_email_popper {
  display: none;
}
</style>
